<template>
  <div class="">
    <h1>计算属性</h1>
    <h1>{{ msg }}</h1>
    <button @click="msg = 'vuevuevue'">改变msg</button>
    <!-- <button @click="num++">num++</button>
    价格是：{{ price }}数量是：{{ num }}
    <button @click="com">结果是</button>
    <h1>{{ result }}</h1>
    <h1>{{ sum }}</h1> -->
    <button @click="list[0].num++">电竞椅的数量++</button>

    商品的总价是:{{ allprice | filnums }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "helloworld",
      num: 10,
      price: 200,
      result: 0,
      list: [
        {
          title: "电竞椅",
          price: 270,
          num: 5,
        },
        {
          title: "电竞鼠标",
          price: 100,
          num: 8,
        },
        {
          title: "电竞键盘",
          price: 100,
          num: 6,
        },
      ],
    };
  },
  methods: {
    com() {
      this.result = this.price * this.num;
    },
  },
  computed: {
    sum() {
      return this.price * this.num;
    },

    allprice() {
      let num = 0;
      this.list.forEach((item) => {
        num += item.price * item.num;
      });
      return num;
    },
  },
  //计算属性长的是函数的样子，但是使用的时候跟data的用法一样,必须要有一个return 值 返回的是计算的结果,跟她有关的值发生改变的时候 这个计算属性会自动计算，跟他无关的值发生改变的时候不会重新计算，而是从缓存中拿上一次算出来的值
};
</script>

<style lang="scss"></style>
